<template>
    <div id="app">
        <h1>请选择你喜欢的水果</h1>
        <span v-for="item in arr" :key="item.name">
            <span v-if="item.c === true" class="iname">{{ item.name }}</span>
        </span><br>
        <div class="fruits">
            <span class="allCheck">全选</span>
            <input type="checkbox" v-model="isAll">


            <ul>
                <li v-for="(item, index) in arr" :key="index">
                    <input type="checkbox" v-model="item.c">
                    <span v-text="item.name"></span>
                </li>
            </ul>
            <br>
            <button @click="isReverse">反选</button>
            <hr>

            <input type="text" v-model="dd">
            <input type="text" v-model="obj.name">
            <input type="text" v-model="obj.info">
        </div>
    </div>
</template>
  
<script>

export default {
    name: 'App',
    data() {
        return {
            arr: [{ name: '苹果', c: false }, { name: '香蕉', c: false }, { name: '橘子', c: false }, { name: '草莓', c: false }],
            obj: { name: 'cl', info: { address: 'cl', phone: 18 } },
            dd: 'abc',

        }
    },
    methods: {
        isReverse() {
            return this.arr.forEach(item => (item.c = !item.c))
        }
    },
    computed: {
        isAll: {
            //当计算属性需要双向绑定，需要计算的完整算法 默认只有getter
            set(value) {
                this.arr.forEach((item) => (item.c = value))
            },
            get() {
                return this.arr.every((item) => item.c === true)
            }
        }
    },
    watch: {
        isAll(newValue, oldValue) {
            console.log("isAll:", newValue, oldValue);
        },
        dd(newValue, oldValue) {
            console.log("dd:", newValue, oldValue);
        },
        // "obj.name"(newValue,oldValue){
        //     console.log(newValue,oldValue);
        // },
        // "obj.info.address"(newValue,oldValue){
        //     console.log(newValue,oldValue);
        // },

        // 深度监听 ：需要设置deep属性  不能监听对象属性中发生的变化
        // 如果刷新或首次加载执行  需要设置immediate
        obj: {
            deep: "true",
            // immediate: "true",
            handler(newValue, oldValue) {
                console.log('obj: ', newValue, oldValue);
            }
        },
    }
}
</script>
  
<style>
body {
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: center;
}

h1 {
    text-align: center;
    margin-left: 450px;
}

.fruits {
    text-align: center;
    font-size: 20px;
}

li {
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.iname {
    text-align: center;
    font-size: 25px;
}
</style>
  